<template>
    <div>
        <el-row class="module-title">
            <!-- <el-col :span="3"><el-button size="small" @click="backToHome" type="primary">返回主页面</el-button></el-col> -->
            <!-- <el-col :span="18">
                <div style="height: 280px;width: 100%;margin-top: 30px;" id="lineChart"></div>
            </el-col> -->
            <el-col :span="22" :offset="1" style="font-size: 20px;font-weight: bold;text-align: left;word-wrap: break-word;">
                <div>模块名称：{{ moduleName }}</div>
                <div>话题量：{{ questionTotal }}</div>
            </el-col>
        </el-row>
        <el-row style="margin: 20px;line-height: 30px;">
            <el-col :span="2">标题</el-col>
            <el-col :span="6"><el-input size="small" v-model="questionTitle" placeholder="请输入关键字..."></el-input></el-col>
            <el-col :span="2">内容</el-col>
            <el-col :span="6"><el-input size="small" v-model="questionContent" placeholder="请输入关键字..."></el-input></el-col>
            <el-col :span="2"><el-button size="small" type="primary" @click="getQuestionList">查询</el-button></el-col>
        </el-row>
        <div>
            <div v-for="(item,index) in questionList" :key="index" class="question">
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="3" :offset="2">
                        <div><img :src="imgUrl+item.userImg" style="height: 100px;width: 100px;" /></div>
                        <div style="color: #666666;margin-top: 10px;font-size: small;"><i class="el-icon-user"></i> {{ item.userName }} </div>
                    </el-col>
                    <el-col :span="19" style="border-left: 1px #DCDFE6 solid;padding: 20px;">
                        <el-row>
                            <el-col :span="20">
                                <div style="color: #005097;margin-top: 10px;"><el-button type="text" style="font-size: large;word-wrap: break-word;" @click="goToReply(item.id)">{{ item.title }}</el-button></div>
                                <div style="color: #666666;margin-top: 10px;margin-bottom: 10px;word-wrap: break-word;">{{ item.content }}</div>
                                <div v-if="item.img.length > 0">
                                    <img v-for="(img,index) in item.imgList" :key="index" style="height: 100px;width: 150px;" :src="imgUrl+img" />
                                </div>
                                <div v-else-if="item.video.length > 0">
                                    <video :src="imgUrl+item.video" type="video/mp4" controls="controls" style="height: 300px;width: auto;"></video>
                                </div>
                                <div style="color: #666666;margin-top: 10px;font-size: small;"> <i class="el-icon-alarm-clock"></i> {{ item.formatTime }}</div>
                            </el-col>
                            <el-col :span="4">
                                <el-popconfirm v-if="userType === 'auditors'" title="确定删除该话题吗？" @confirm="deleteQuestion(item.id)" ><el-button slot="reference" type="danger">删除</el-button></el-popconfirm>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div style="clear: both;text-align: right;">
            <el-pagination background layout="prev, pager, next" :total="questionTotal" @current-change="currentChangeQuestion"></el-pagination>
        </div>
        <div style="background-color: #FCFCFC;border: 2px #a09f9f solid;margin-top: 20px;margin-bottom: 100px;border-radius: 10px;">
            <div style="text-align: left;font-size: large;margin: 20px;"><i class="el-icon-edit"></i> 发表新话题</div>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">标题</el-col>
                <el-col :span="22"><el-input v-model="question.title"></el-input></el-col>
            </el-row>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">内容</el-col>
                <el-col :span="22"><textarea style="width: 99%;height: 200px;border:1px #DCDFE6 solid;border-radius: 4px;" v-model="question.content"></textarea></el-col>
            </el-row>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">图片</el-col>
                <el-col :span="22" :offset="2" style="text-align: left;">
                    <el-upload
                        action="http://120.26.2.5:15400/upload/file"
                        :limit="9"
                        list-type="picture-card"
                        :file-list="imgList"
                        :on-remove="removeImage"
                        :on-success="uploadImage">
                        <el-button type="success" icon="el-icon-picture-outline" circle></el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">视频</el-col>
                <el-col :span="22" :offset="2" style="text-align: left;">
                    <el-upload
                        action="http://120.26.2.5:15400/upload/file"
                        :limit="1"
                        list-type="text"
                        :file-list="videoList"
                        :on-remove="removeVideo"
                        :on-success="uploadVideo">
                        <el-button type="danger" icon="el-icon-video-camera">上传视频</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <div style="margin: 30px;"><el-button style="width: 80%;background-color: #BDCEFC;color: white;border-radius: 20px;border: none;" type="primary" @click="submitQuestion">提交</el-button></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { addQuestion, deleteQuestion, getQuestionCountByMonth, listQuestion } from '@/api/api'
import {timestampToTime} from '@/util/dateUtil'
export default {
    data(){
        return{
            imgUrl: '',
            moduleId: 0,
            moduleName: '',
            questionTitle: '',
            questionContent: '',
            questionCurrent: 1,
            questionSize: 10,
            questionTotal: 0,
            questionList: [],
            question:{
                content: '',
                img: '',
                mid: 0,
                title: '',
                uid: 0,
                video: ''
            },
            imgList:[],
            videoList: [],
            year: new Date(),
            userType: ''
        }
    },
    mounted(){
        const that = this
        that.imgUrl = that.$store.state.imgUrl
        that.moduleId = that.$route.query.m_id
        that.moduleName = that.$route.query.m_name
        that.getQuestionList()
        // that.getQuestionCountByMonth()
        that.userType = localStorage.getItem('userType')
    },
    methods:{
        getQuestionCountByMonth:function(){
            const that = this
            getQuestionCountByMonth({
                moduleId:that.moduleId,
                year: that.year.getFullYear() + ''
            }).then(res => {
                let xData = [that.year.getFullYear()+'-01',that.year.getFullYear()+'-02',that.year.getFullYear()+'-03',
                that.year.getFullYear()+'-04',that.year.getFullYear()+'-05',that.year.getFullYear()+'-06',
                that.year.getFullYear()+'-07',that.year.getFullYear()+'-08',that.year.getFullYear()+'-09',
                that.year.getFullYear()+'-10',that.year.getFullYear()+'-11',that.year.getFullYear()+'-12']
                let yData = []
                xData.forEach(item => {
                    yData.push(res.data[item])
                })
                that.getLineChart(xData,yData)
            })
        },
        getLineChart:function(xData,yData){
            const chartBox = echarts.init(document.getElementById("lineChart"));
            const option = {
                title: {
                    text: '本年各月发题量',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: yData,
                    type: 'line',
                    areaStyle: {}
                    }
                ]
            };
            chartBox.setOption(option);
        },
        getQuestionList:function(){
            const that = this
            listQuestion({
                moduleId: that.moduleId,
                title: that.questionTitle,
                content: that.questionContent,
                current: that.questionCurrent,
                size: that.questionSize
            }).then(res => {
                that.questionTotal = res.data.total
                let questionList = res.data.records
                questionList.forEach(element => {
                element.imgList = element.img.split(',')
                element.formatTime = timestampToTime(element.time)
                });
                that.questionList = questionList
            })
        },
        currentChangeQuestion:function(current){
            const that = this
            that.questionCurrent = current
            that.getQuestionList()
        },
        uploadImage:function(response, file, fileList){
            const that = this
            that.question.img = ''
            if(fileList.length > 0){
                fileList.forEach(item => {
                    that.question.img += (item.response + ',')
                })
            }
            that.question.img = that.question.img.substring(0,that.question.img.length - 1)
        },
        removeImage:function(file, fileList){
            const that = this
            that.question.img = ''
            if(fileList.length > 0){
                fileList.forEach(item => {
                    that.question.img += (item.response + ',')
                })
            }
            that.question.img = that.question.img.substring(0,that.question.img.length - 1)
        },
        uploadVideo:function(response, file, fileList){
            const that = this
            if(fileList.length > 0){
                that.question.video = fileList[0].response
            }else{
                that.question.video = ''
            }
        },
        removeVideo:function(file, fileList){
            const that = this
            if(fileList.length > 0){
                that.question.video = fileList[0].response
            }else{
                that.question.video = ''
            }
        },
        submitQuestion:function(){
            const that = this
            if(that.question.title.length <= 0 || that.question.content.length <= 0){
                that.$message({
                    message: '标题或内容为空！',
                    type: 'warning'
                })
                return
            }
            that.question.mid = that.moduleId
            if(localStorage.getItem('userId') == null){
                that.$message({
                    message:'您还未登录！',
                    type: 'warning'
                })
                return
            }
            that.question.uid = localStorage.getItem('userId')
            addQuestion(that.question).then(res => {
                if(res.status === 200){
                    that.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    that.getQuestionList()
                    that.getQuestionCountByMonth()
                    that.question = {
                        content: '',
                        img: '',
                        mid: 0,
                        title: '',
                        uid: 0,
                        video: ''
                    }
                    that.imgList = []
                    that.videoList = []
                }else{
                    that.$message({
                        message: '提交出错',
                        type: 'error'
                    })
                }
            })
        },
        deleteQuestion:function(id){
            const that = this
            deleteQuestion({
                id:id
            }).then(res => {
                if(res.status === 200){
                    that.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    that.getQuestionList()
                    that.getQuestionCountByMonth()
                }else{
                    that.$message({
                        message:'删除失败',
                        type: 'error'
                    })
                }
            })
        },
        backToHome:function(){
            this.$router.push('/')
        },
        goToReply:function(id){
            const that = this
            that.$router.push('/reply?q_id='+id)
        }
    }
}
</script>

<style scoped>
.module-title{
    height: 200px;
    background-color: #F3F5F8;
    line-height: 60px;
}
</style>